﻿@import url(Fonts/thsarabunnew.css);
/* Background 260 */
.Background260
{
	width: 260px;
	background: url(../APP_UI/Image/Background260.jpg) no-repeat;
	margin-top: 0px;
}

.BackgroundBottom260
{
	background: url(../APP_UI/Image/BackgroundBottom260.gif) no-repeat bottom;
	padding: 23px 17px;
	line-height: 16px;
}

.BackgroundBottom260 div.title {
    margin-bottom: 0;
    padding: 13px 0;
}

div.BackgroundBottom260 {
    padding: 7px 17px;
    overflow: hidden;
}

div.BackgroundBottom260_Tree {
    padding: 7px 0px;
    overflow: hidden;
}
/* Background 710 (Panel Command)*/
.Background710
{
	width: 710px;
	background: url(../APP_UI/Image/Background710.jpg) no-repeat;
	margin-top: 0px;
}

.BackgroundBottom710
{
	background: url(../APP_UI/Image/BackgroundBottom710.gif) no-repeat bottom;
	padding: 23px 17px;
	line-height: 16px;
}

.BackgroundBottom710 div.title {
    margin-bottom: 0;
    padding: 13px 0;
}

div.BackgroundBottom710 {
    padding: 7px 17px;
    overflow: hidden;
}

.padding10
{
	padding-top: 10px;
	padding-left: 10px;
}

.margin10 {
    margin: 10px;
}
/* -------------------------------------------------------- */
/* Background 980 (Panel Grid, Panel Detail Full Screen) */
.Background980
{
	width: 980px;
	background: url(../APP_UI/Image/Background980.jpg) no-repeat; 
	margin-top: 0px;
}

.BackgroundBottom980
{
	background: url(../APP_UI/Image/BackgroundBottom980.gif) no-repeat bottom;
	padding: 23px 17px;
	line-height: 16px;
}

.Background980V2
{
	/* border: solid 1px black; */
	width: 960px;
	background: url(../APP_UI/Image/Background980Bottom.png) no-repeat bottom, url(../APP_UI/Image/Background980Top.png) no-repeat top, url(../APP_UI/Image/Background980Middle.png) repeat-y top;
	/* background-color: rgb(228, 246, 255); */ 
	margin-bottom: 15px;
	padding: 10px 10px 10px 10px;
}

.BackgroundSlim
{
	background: url('../App_UI/Image/Background980MenuLeft.png') no-repeat left, url('../App_UI/Image/Background980MenuRight.png') no-repeat right ,url('../App_UI/Image/Background980MenuCenter.png') repeat-x left;
	height: 38px; 
	padding-top:1px;
}

.Background980 div.title {
    margin-bottom: 0;
    padding: 13px 0;
}

div.BackgroundBottom980 {
    padding: 7px 17px;
    overflow: hidden;
}

/* Header Grid */
.header-grid
{
	border-bottom: 3px double #959485;
	padding: 5px;
	width: 105%;
	color: #567DB0;
	font-weight: bold;
	font-size: 24px;
}

.controlPanel
{
    border-width: 1px;
    padding: 10px;
    border-bottom-style: solid;
    border-bottom-color: #0066FF;
    height: 20px;
}

.Underline-Double
{
	border-bottom: 3px double #959485;
}

.header-command
{
	border-bottom: 3px double #959485;
	padding: 5px 5px;
	padding-top: 7px;
	margin-bottom: 2px;
	margin-left: 5px;
	width: 98%;
}
/* ------------------------------------------------------- */

ul.command-small-list
{
    list-style:none;
    padding:0;
    margin:0;
}
    
li.command-small-item
{
    float:left;
    padding-left:10px;
    padding-right:10px;
    border-left: solid 1px #b1d8eb;
}

/* -------------------------------------------------------- */

.bigModule
{
	width: 710px;
	background: url(../APP_UI/Image/Background710.jpg) no-repeat;
	margin-bottom: 1px;
	margin-top: 0px;
}

.bigModuleBottom
{
	background: url(../APP_UI/Image/BackgroundBottom710.gif) no-repeat bottom;
	padding: padding: 0px 0px;
	line-height: 16px;
}

.bigModuleBottom div.title {
    margin-bottom: 0;
    padding: 0px 0;
}

div.bigModuleBottom {
    padding: 7px 17px;
    overflow: hidden;
}

/* bigModule-Left */

.bigModuleLeft
{
	width: 260px;
	background: url(../APP_UI/Image/qsfModuleTopLeft.jpg) no-repeat;
	margin-bottom: 1px;
	margin-top: 0px;
}

.bigModuleBottomLeft
{
	background: url(../APP_UI/Image/qsfModuleBottomLeft.gif) no-repeat bottom;
	padding: 23px 17px;
	line-height: 16px;
}

.bigModuleBottomLeft div.title {
    margin-bottom: 0;
    padding: 13px 0;
}

div.bigModuleBottomLeft {
    padding: 7px 17px;
    overflow: hidden;
}

div.bigModuleBottomTreeLeft {
    padding: 7px 0px;
    overflow: hidden;
}
/* Big Module Full*/
.bigModuleFull
{
	width: 1000px;
	background: url(../APP_UI/Image/qsfModuleTopFull.jpg) no-repeat;
	margin-top: 5px;
}

.bigModuleBottomFull
{
	background: url(../APP_UI/Image/qsfModuleBottomFull.gif) no-repeat bottom;
	padding: 23px 17px;
	line-height: 16px;
}

.bigModuleBottomFull div.title {
    margin-bottom: 0;
    padding: 12px 0;
}

div.bigModuleBottomFull {
    padding: 7px 17px;
    overflow: hidden;
}
/* small module */

div.smallModule
{
	float: right;
	background-color: #e4f6ff;
}

div.smallModule *
{
}

.smallModule .rc3
{
	min-width: 270px;
	min-height: 210px;
	padding: 10px;
	overflow: hidden;
}

* html .smallModule .rc3
{
	width: 270px;
	height: 210px;
}

.smallModule,
.smallModule .rc1,
.smallModule .rc2,
.smallModule .rc3
{
	background: url('../APP_UI/Image/qsfSmallModule.gif') no-repeat top left;
}

.smallModule .rc1 { background-position: 100% 0; }
.smallModule .rc2 { background-position: 0 100%; }
.smallModule .rc3 { background-position: 100% 100%; }

.smallModule .title
{
	border-bottom: 1px solid #333;
	display: block;
	margin: 10px;
	text-indent: 3px;
}



.Loading
{
    background-color:White;
}

/* Tree View List*/

.tree-module
{
	width: 320px;
	height: 350px;
	padding: 23px 0px;
	background: transparent url('../APP_UI/Image/module.png') no-repeat 0 0;
	float:left;
}

ul.treeview-list
{
    list-style:none;
    padding:0;
    margin:0; 
}
    
li.treeview-item
{
    float:left;
    padding-left:10px;
    padding-right:10px;
    border-left: solid 1px #b1d8eb;
    height: 18px;
}
    
ul.main-treeview-list
{
    list-style:none;
    padding:0;
    margin:0;
}
    
li.main-treeview-item
{
    float:left;
    padding-left:7px;
    padding-right:7px;
    border-left: solid 1px #b1d8eb;
}    

.table-header 
{
	background-image: url('../APP_UI/Image/Tree/header.gif'); 
}

.table-sub-header
{
	background-image: url('../APP_UI/Image/Tree/sub-header.gif'); 
}

.table-outlook-header
{
	background-image: url('../APP_UI/Image/Tree/outlook-header.gif');
	height: 32px; 
}

.table-bg-color-header
{
	background-color: #FFD69A;
}
.spreadSheet
{
	width: 752px;
	background: url(Images/spreadsheetBg.png) left top no-repeat;
	padding-top:55px;
	height: 355px;
}
.RadGrid_Office2007
{
	border-left: none !important;
}

.tabStrip
{
	margin: 0 15px 0 14px !important;
}
.tabStrip .rtsLevel1
{
	padding:0 !important;
}

.RadGrid A:hover
{ 
	COLOR: orange 
}

A.LinkButton:active
{ 
	color: Black;
	TEXT-DECORATION: none;
	font-family: Segoe UI;
	font-size: 13px;
}

A.LinkButton:hover 
{ 
	color: orange;
	TEXT-DECORATION: none;
	font-family: Segoe UI;
	font-size: 13px;
}

A.LinkButton
{ 
	color: Blue;
	TEXT-DECORATION: none;
	font-family: Segoe UI;
	font-size: 13px;
    margin-left: 0px;
}

A.LinkButton img
{ 
	border:0px;vertical-align:middle;
}

A.LinkButtonWhite:active
{ 
	color: White;
	TEXT-DECORATION: none;
	font-family: Segoe UI;
	font-size: 13px;
}

A.LinkButtonWhite:hover 
{ 
	color: orange;
	TEXT-DECORATION: none;
	font-family: Segoe UI;
	font-size: 13px;
}

A.LinkButtonWhite 
{ 
	color: White;
	TEXT-DECORATION: none;
	font-family: Segoe UI;
	font-size: 13px;
}

A.ControlLinkButton:active
{ 
	color: Black;
	TEXT-DECORATION: none;
	font-family: Segoe UI;
	font-size: 13px;
}

A.ControlLinkButton:hover 
{ 
	color: orange;
	TEXT-DECORATION: none;
	font-family: Segoe UI;
	font-size: 13px;
}

A.ControlLinkButton
{
    border-width: 1px;
    border-color: #0066CC;
    color: Blue;
    text-decoration: none;
    font-family: Segoe UI;
    font-size: 13px;
    padding-right: 10px;
    padding-left: 10px;
    border-right-style: solid;
}

A.ControlLinkButton img
{ 
	border:0px;vertical-align:middle;
}

.formListH600
{
	width: 90%;
	height: 900px;
	list-style: none;
	padding: 0 0 0 23px;
}

.formList
{
	width: 90%;
	height: 310px;
	list-style: none;
	padding: 0 0 0 23px;
}

.formList li
{
	border-bottom: 1px Dotted #959485;
	padding: 5px 0px;
}

.formList li.lastListItem
{
	border: none;
	padding: 0px;
	text-align: right;
}

/*-------------------------------- Rad menu ---------------------------------*/

.RadMenu
{
	z-index:1000;
}

/* -------------------------------- Text --------------------------------------*/

div.text
{
    color: #4888a2;
    padding: 6px 18px;
    display: block;
}

.text
{
	color: #4888a2;
	padding: 6px 18px;
	display: block;
	text-decoration: underline;
}

/* -------------------------------- by don --------------------------*/
.panelGrid_341	
{
	height: 341px;	
}
.panel_480
{
	height: 420px;	
}

.bigModuleFull
{
	width: 1000px;
	background: url(../APP_UI/Image/Background/qsfModuleTopFull.jpg) no-repeat;
	margin-top: 5px;
}

.bigModuleFull480
{
	width: 980px;
	background: url(../APP_UI/Image/Background/qsfModuleTopFull550.jpg) no-repeat;
	margin-top: 5px;
}

.bigModuleBottomFull
{
	background: url(../APP_UI/Image/Background/qsfModuleBottomFull.gif) no-repeat bottom;
	padding: 10px;
	line-height: 16px;
}

.bigModuleFull900
{
	width: 860px;
	background: url(../APP_UI/Image/Background/qsfModuleTop900_500.jpg) no-repeat;
	margin-top: 5px;
}

.bigModuleBottom900
{
	background: url(../APP_UI/Image/Background/qsfModuleBottom900.gif) no-repeat bottom;
	padding: 10px;
	line-height: 16px;
}

.bigModuleBottomFull480
{
	background: url(../APP_UI/Image/Background/qsfModuleBottomFull.gif) no-repeat bottom;
	padding: 10px;
	line-height: 16px;
}

.padingPanel-Top-Bottom
{
	margin-bottom: 5px;
	margin-top: 5px;
	text-align: left;
}

/* style in body ----------------------------------------------------------------------------------*/

body 
{
	margin: 0 0 0 0;	
}

/* style in multipage ----------------------------------------------------------------------------- */

.multiPage
{
	display: -moz-inline-box;
	display: inline-block;
	position: relative;
	margin-bottom: -3px;
	color:#ffffff !important;
}

.pageView
{
    border: 1px solid #898c95;
    margin-top: -1px;
    height: 350px;
}

/*------------ Default Style --------------*/

.defaultFont
{
	font-family: Segoe UI;
	font-size: 13px;
}

.defaultTable
{
    width: 100%; 
    font-family: 'Segoe UI'; 
    font-size: 13px;
}

.defaultTextbox
{
    border: 1px solid #BFD6F9;
}

.defaultTableLineLeftColumn
{
    border-bottom-width: 1px;
    border-bottom-color: #CCCCCC;
    border-bottom-style: groove;
    padding-left: 5px; 
    padding-bottom: 2px; 
    padding-top: 12px;
}

.defaultTableLineRightColumn
{
    border-bottom-width: 1px;
    border-bottom-color: #CCCCCC;
    border-bottom-style: groove;
    padding-bottom: 2px; 
    padding-top: 12px;
}

.RadNumericTextBox
{
	text-align: right;
}

.DateTextBox
{
	border: 1px solid #C3D9F9;
	width: 75px;
	height: 18px;
}

.Opacity
{
	filter: alpha(opacity=65);
	background-color: #808080;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 5001;
}

.PanelAbsolute
{
	padding: 10px;
	border: 1px solid #000099;
	position: absolute;
	z-index: 5100;
	top: 10px;
	left: 20%;
	background-color: #FFFFFF;
}

/*================================================ DatePicker ===================================================*/

.DateTextBox
{
	border: 1px solid #C3D9F9;
	width: 75px;
	height: 18px;
}
/* the div that holds the date picker calendar */
.dpDiv {
	}

/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #ece9d8;
	border: 1px solid #AAAAAA;
	}

/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}

/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}

/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}

/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}

/* a table cell that holds a date number (either blank or 1-31) */
.dpTD
{
	border: 1px solid #ece9d8;
	width: 20px;
}
	
.dpTDweekend
{
	border: 1px solid #ece9d8;
	color: #FF0000;
	width: 20px;
}

/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}

/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}

/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}

/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}

/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}

/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: white;
	}

/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: gray;
	font-weight: bold;
	}

/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: #4060ff;
	font-weight: bold;
	}

/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	padding: 0px;
	}

/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton
{
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #3366FF;
	background: #d8e8ff;
	font-weight: bold;
	width: 70px;
}

.span
{
	color: #FF0000;
}

.PanelControl
{
	padding-top: 10px;
	background-color: #3B5998;
}

.DivControl
{
	padding-top: 10px;
	padding-bottom: 10px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #B3B3B3;
	border-bottom-color: #B3B3B3;
	border-left-color: #B3B3B3;
	background-color: #627AAD;
}

.PanelPage
{
	padding-top: 20px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #B3B3B3;
	padding-bottom: 12px;
	text-align: center;
	background-color: #3B5998;
}

.PanelTopHeader
{
	padding: 10px;
	background-color: #3B5998;
}

.PanelProgress
{
	
}

.DivProgress
{
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #B3B3B3;
	padding-top: 10px;
	padding-bottom: 10px;
}

.PanelBody
{
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #B3B3B3;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #B3B3B3;
}

.DivInfo
{
	background-color: #D8DFEA;
	border: solid 1px #bbc3d0;
	padding: 10px;
}

.DivBody
{
	padding: 10px;
}

.PanelAbsolute
{
	padding: 10px;
	border: 1px solid #000099;
	position: absolute;
	z-index: 5000;
	top: 5px;
	right: 5px;
	background-color: #FFFFFF;
}

.PanelAbsoluteEdit
{
	padding: 10px;
	border: 1px solid #000099;
	position: absolute;
	z-index: 5100;
	top: 10px;
	left: 20%;
	background-color: #FFFFFF;
}

.DivLoadingPanel
{
	position: absolute;
	bottom: 0px;
	right: 0px;
	text-align: right;
	z-index: 9000;
}

.NumericTextBox
{
    text-align: right;
}

.Background980V3 /* Vista aurora background with flexible height */
{
	/* border: solid 1px black; */
	width: 960px;
    background:  
    url('../App_UI/Image/Background/Aurora Light/bottom_left.png') no-repeat left bottom, 
    url('../App_UI/Image/Background/Aurora Light/bottom_right.png') no-repeat bottom right,
    url('../App_UI/Image/Background/Aurora Light/top_left.png') no-repeat left top, 
    
    url('../App_UI/Image/Background/Aurora Light/mid_left.png') repeat-y left top, 
    url('../App_UI/Image/Background/Aurora Light/bottom_mid.png') repeat-x left bottom,
    url('../App_UI/Image/Background/Aurora Light/top_right.png') no-repeat right top, 
    url('../App_UI/Image/Background/Aurora Light/mid_right.png') repeat-y right top, 
    url('../App_UI/Image/Background/Aurora Light/top_mid.png') repeat-x left top ; 
    background-color: rgb(228, 246, 255);  
	padding: 10px 10px 10px 10px;
    margin-bottom: 15px;
}
.TextHeader
{
    font-size:large;
    font-family: 'THSarabunNew', sans-serif;
    font-weight:normal;
    color: #515151;
}
.TextSubHeader
{
    font-size:medium;
    font-family: 'THSarabunNew', sans-serif;
    font-weight:600;
    color: #515151;
    margin-top: 15px;
}
.FieldGroupHeader {
    background-color:#99CCFF;
    background-color: rgba(151,184,232, 0.49); 
    height: 28px;
    width: 970px;
    font-weight: bold;
    font-size: 110%;
    padding: 10px 0 0 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-box-shadow: #ffffff 1px 1px;
    border: #99ccff solid 1px;
}